<template>
  <div>
    <Breadcrumb>
      <BreadcrumbItem href="channelManger">渠道管理</BreadcrumbItem>
      <BreadcrumbItem>新增渠道</BreadcrumbItem>
    </Breadcrumb>
    <Tabs>
      <TabPane label="支付渠道参数配置">
        <div class="channel_item">
          <Select v-model="currentPayWay" style="width:150px;border-radius: 16px" placeholder="请选择支付方式"
                  @on-change="changePayWay">
            <Option value="" key="">请选择</Option>
            <Option v-for="item in payWayArr" :value="item.name" :key="item.desc">
              {{ item.desc }}
            </Option>
          </Select>
          <Select v-model="currentPayType" style="width:300px;border-radius: 16px" placeholder="请选择支付类型"
                  @on-change="changePayType">
            <Option value="" key="">请选择</Option>
            <Option v-for="item in payTypeArr" :value="item.name" :key="item.desc">
              <span>{{ item.desc }}</span>
              <span style="float:right;color:#ccc">{{ item.name }}</span>
            </Option>
          </Select>
          <Select v-model="currentPayChannel" style="width:220px;border-radius: 16px" placeholder="请选择支付通道"
                  @on-change="changePayChannel">
            <Option value="" key="">请选择</Option>
            <Option v-for="item in payChannelArr" :value="item.name" :key="item.desc">
              {{ item.desc }}
            </Option>
          </Select>
        </div>
        <Row>
          <Col span="16">
          <div v-if="this.currentChannel !== ''" class="currentChannel">
            {{currentChannelName}}参数配置:
          </div>
          <Form :label-width="100" ref="formItem" :model="formItem" :rules="ruleFormItem">
            <div v-if="this.currentChannel === 'ALI'">
              <Form-item label="合作者身份（PID）：" prop="alipayConfig_partnerId">
                <Input v-model="formItem.alipayConfig_partnerId" placeholder="请输入PID"/>
              </Form-item>
              <Form-item label="MD5_KEY：" prop="alipayConfig_md5Key">
                <Input v-model="formItem.alipayConfig_md5Key" placeholder="请输入MD5_KEY"/>
              </Form-item>
              <Form-item label="支付宝账号：" prop="alipayConfig_account">
                <Input v-model="formItem.alipayConfig_account" placeholder="请输入支付宝账号"/>
              </Form-item>
              <Form-item label="商户RSA私钥：" prop="alipayConfig_rsaPrivateKey">
                <Input v-model="formItem.alipayConfig_rsaPrivateKey" placeholder="请输入商户RSA私钥"/>
              </Form-item>
              <Form-item label="支付宝公钥：" prop="alipayConfig_alipayPublicKey">
                <Input v-model="formItem.alipayConfig_alipayPublicKey" placeholder="请输入支付宝公钥"/>
              </Form-item>
            </div>
            <div v-if="this.currentChannel === 'WX'">
              <Form-item label="APPID：" prop="wxConfig_appId">
                <Input v-model="formItem.wxConfig_appId" placeholder="请输入APPID"/>&nbsp;&nbsp;请到“<a
                href="https://mp.weixin.qq.com/" target="_blank" style="color: #c92026;">微信公众平台</a>”上点击“开发者中心”，复制AppID，例如：wx0fe958a123233135
              </Form-item>
              <Form-item label="商户密钥：" prop="wxConfig_apiKey">
                <Input v-model="formItem.wxConfig_apiKey" placeholder="请输入商户密钥"/>&nbsp;&nbsp;请到“<a
                href="https://pay.weixin.qq.com/" target="_blank" style="color: #c92026;">微信支付商户平台</a>”点击 帐户设置→API安全→设置密钥（请根据提示安装财付通证书），32位秘钥
              </Form-item>
              <Form-item label="商户号：" prop="wxConfig_mchId">
                <Input v-model="formItem.wxConfig_mchId" placeholder="请输入商户号"/>&nbsp;&nbsp;微信支付开通成功的通知邮件里，复制“微信支付商户号”，例如：10054321
              </Form-item>
            </div>
            <div v-if="this.currentChannel === 'ALLINSYB'">
              <Form-item label="APPID：" prop="allinSybConfig_appId">
                <Input v-model="formItem.allinSybConfig_appId" placeholder="请输入APPID"/>
              </Form-item>
              <Form-item label="商户号：" prop="allinSybConfig_merchantId">
                <Input v-model="formItem.allinSybConfig_merchantId" placeholder="请输入商户号"/>
              </Form-item>
              <Form-item label="商户密钥(md5)：" prop="allinSybConfig_md5Key">
                <Input v-model="formItem.allinSybConfig_md5Key" placeholder="请输入商户密钥"/>
              </Form-item>
            </div>
            <div v-if="this.currentChannel === 'ALLIN'">
              <Form-item label="商户号：" prop="allinpayConfig_merchantId">
                <Input v-model="formItem.allinpayConfig_merchantId" placeholder="请输入商户号"/>
              </Form-item>
              <Form-item label="MD5_KEY：" prop="allinpayConfig_md5Key">
                <Input v-model="formItem.allinpayConfig_md5Key" placeholder="请输入MD5_KEY"/>
              </Form-item>
              <Form-item label="服务器异步通知页面路径：" prop="allinpayConfig_notifyUrl">
                <Input v-model="formItem.allinpayConfig_notifyUrl" placeholder="请输入服务器异步通知页面路径"/>
              </Form-item>
              <Form-item label="服务器异同通知页面路径：" prop="allinpayConfig_returnUrl">
                <Input v-model="formItem.allinpayConfig_returnUrl" placeholder="请输入服务器异同通知页面路径"/>
              </Form-item>
            </div>
            <div v-if="this.currentChannel === 'HUI'">
              <Form-item label="商户号：" prop="allinpayConfig_merchantId">
                <Input v-model="formItem.huiConfig_merchantId" placeholder="请输入商户号"/>
              </Form-item>
              <Form-item label="机构号：" prop="huiConfig_ins_id_cd">
                <Input v-model="formItem.huiConfig_ins_id_cd" placeholder="请输入机构号"/>
              </Form-item>
              <Form-item label="上送机构号：" prop="huiConfig_chn_ins_id_cd">
                <Input v-model="formItem.huiConfig_chn_ins_id_cd" placeholder="请输入上送机构号"/>
              </Form-item>
            </div>
            <div v-if="this.currentChannel !== ''">
              <FormItem>
                <Button type="primary" @click="handleSubmit('formItem')">提交</Button>
                <Button type="ghost" @click="handleReset('formItem')" style="margin-left: 8px">重置</Button>
              </FormItem>
            </div>
          </Form>
          </Col>
        </Row>
        <div style="height: 400px;"></div>
      </TabPane>
    </Tabs>

  </div>
</template>

<script type="text/ecmascript-6">
  import {mapState} from 'vuex'
  import storage from '@/utils/helpers/storageLite'
  import Model from '@/models/apps'

  export default {
    name: 'channelAdd',
    data () {
      return {
        currentPayWay: '',
        currentPayType: '',
        currentPayChannel: '',
        currentChannel: '',
        currentChannelName: '',
        payWayArr: [],
        payTypeArr: [],
        payChannelArr: [],
        formItem: {
          alipayConfig_partnerId: '',
          alipayConfig_md5Key: '',
          alipayConfig_account: '',
          alipayConfig_rsaPrivateKey: '',
          alipayConfig_alipayPublicKey: '',
          wxConfig_appId: '',
          wxConfig_apiKey: '',
          wxConfig_mchId: '',
          allinSybConfig_appId: '',
          allinSybConfig_merchantId: '',
          allinSybConfig_md5Key: '',
          allinpayConfig_merchantId: '',
          allinpayConfig_md5Key: '',
          allinpayConfig_notifyUrl: '',
          allinpayConfig_returnUrl: '',
          huiConfig_merchantId: '',
          huiConfig_ins_id_cd: '',
          huiConfig_chn_ins_id_cd: ''
        },
        ruleFormItem: {}
      }
    },
    computed: mapState({
      'userPayInfos': state => state.userPayInfos,
      'allApps': state => state.allApps
    }),
    created () {
      this.getPayWay()
    },
    methods: {
      changePayChannel (val) {
        var array = new Array(5)
        array['ALI'] = '支付宝'
        array['ALLIN'] = '通联'
        array['WX'] = '微信'
        array['ALLINSYB'] = '通联收银宝'
        array['HUI'] = '汇宜'
        this.currentChannel = val.substr(val.lastIndexOf('_') + 1)
        this.currentChannelName = array[this.currentChannel]
      },
      changePayType (val) {
        this.currentPayType = val
        new Model('payChannel')
          .GET({
            params: {
              payTypeCode: val
            }
          })
          .then((res) => {
            this.payChannelArr = res.data.data.payChannelList
          })
      },
      changePayWay (val) {
        this.currentPayWay = val
        new Model('payType')
          .GET({
            params: {
              payWayCode: val
            }
          })
          .then((res) => {
            this.payTypeArr = res.data.data.payTypeList
          })
      },
      getPayWay () {
        new Model('payWay')
          .GET()
          .then((res) => {
            this.payWayArr = res.data.data.payWayList
          })
      },
      handleSubmit () {
        new Model('userPayInfo')
          .POST({
            params: {
              userNo: storage.get('userNo'),
              payWayCode: this.currentPayWay,
              payTypeCode: this.currentPayType,
              channelCode: this.currentPayChannel,
              productId: (this.allApps.currentApp === null) ? this.$route.params.id : this.allApps.currentApp,
              ...this.formItem
            }
          })
          .then((res) => {
            if (res.data.errorCode === '200') {
              this.modalShow = false
              this.$Message.success('操作成功!')
            } else if (res.data.errorCode === '7001') {
              this.$Message.error('该渠道已经配置过，无需重复配置！！')
            } else {
              this.$Message.error('操作失败，未知异常！！')
            }
          })
      },
      handleReset (name) {
        this.$refs[name].resetFields()
      }
    }
  }
</script>

<style>
  .channel_item {
    margin-bottom: 15px;
  }

  .currentChannel {
    padding-left: 16px;
    font-size: 15px;
    color: #48aafa;
    margin-bottom: 10px;
    font-weight: bold;
  }
</style>
